<template>
    <div>
      <!-- 行内表单 条件查询 -->
      <el-form :inline="true" :model="queryForm" ref="queryForm" class="demo-form-inline">
        <el-form-item label="产品名称" prop="prodName">
          <el-input v-model="queryForm.prodName" placeholder="产品名称"></el-input>
        </el-form-item>
        <el-form-item label="审核状态" :label-width="formLabelWidth">
          <el-select v-model="queryForm.prodState" placeholder="请选择审核状态">
            <el-option label="审核通过" value="0"></el-option>
            <el-option label="审核中" value="1"></el-option>
            <el-option label="审核未通过" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="executeQuery()">查询</el-button>
          <el-button @click="resetForm('queryForm')">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格 展示产品数据 -->
      <el-table :data="prodData" style="width: 100%">
        <el-table-column prop="prodId" label="产品名称ID" width="165"></el-table-column>
        <el-table-column prop="prodName" label="产品名称" width="165"></el-table-column>
        <el-table-column prop="parentClass" label="业务类型" width="165"></el-table-column>
        <el-table-column prop="creatorName" label="创建人" width="165"></el-table-column>
        <el-table-column prop="creTime" label="首次创建时间" width="200"></el-table-column>
        <el-table-column prop="modTime" label="最新修改时间" width="200"></el-table-column>
        <el-table-column prop="prodState" label="审核状态" width="150">
          <template slot-scope="scope">
            <span v-if="scope.row.prodState===0"><el-tag type="success" disable-transitions>审核通过</el-tag></span>
            <span v-if="scope.row.prodState===1"><el-tag type="info" disable-transitions>审核中</el-tag></span>
            <span v-if="scope.row.prodState===2"><el-tag type="danger" disable-transitions>审核未通过</el-tag></span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
            <span v-if="scope.row.prodState===1">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)">审核</el-button></span>
           <!-- <span v-if="scope.row.prodState===0">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)" :disabled="true">审核</el-button>
            <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
            </span>
            <span v-else-if="scope.row.prodState===1">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)">审核</el-button>
            <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
            </span>
            <span v-else-if="scope.row.prodState===2">
            <el-button size="mini" type="warning" @click="toEdit(scope.$index, scope.row)" :disabled="true">审核</el-button>
            <el-button size="mini" type="danger" @click="executeDelete(scope.$index, scope.row)">删除</el-button>
            </span>-->
          </template>
        </el-table-column>
      </el-table>

      <!--审核对话框-->
      <el-dialog title="产品详情" :visible.sync="editDialogFormVisible">
        <el-form :model="editForm">
          <el-row>
            <el-col :span="24">
              ——————基本信息—————————————————————————————————————————————————
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品系列" :label-width="formLabelWidth">
                <el-input v-model="editForm.prodCategoryName" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="二级分类" :label-width="formLabelWidth">
                <el-input v-model="editForm.parentClass" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品名称" :label-width="formLabelWidth">
                <el-input v-model="editForm.prodName" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="资管机构" :label-width="formLabelWidth">
                <el-input v-model="editForm.prodChannelName" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="年化收益率" :label-width="formLabelWidth">
                <el-input v-model="editForm.anlRate" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="货币类型" :label-width="formLabelWidth">
                <el-input v-model="editForm.currencyType" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              ——————认购属性—————————————————————————————————————————————————
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="开放时间" :label-width="formLabelWidth">
                <el-date-picker v-model="editForm.opeTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
                                placeholder="选择开放时间" :disabled="true">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="认购周期" :label-width="formLabelWidth">
                <el-input v-model="editForm.subsPeriod" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="基金管理费率" :label-width="formLabelWidth">
                <el-input v-model="editForm.fundManageRate" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="认购费率" :label-width="formLabelWidth">
                <el-input v-model="editForm.subsRate" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="起投金额" :label-width="formLabelWidth">
                <el-input v-model="editForm.iniInvestAmt" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="认购费收取方式" :label-width="formLabelWidth">
                <el-input v-model="editForm.subsCoMethod" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              ——————赎回属性—————————————————————————————————————————————————
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="赎回周期" :label-width="formLabelWidth">
                <el-input v-model="editForm.redCycle" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="赎回起始金额" :label-width="formLabelWidth">
                <el-input v-model="editForm.redStartAmt" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="赎回费" :label-width="formLabelWidth">
                <el-input v-model="editForm.redFee" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="锁定期(封闭期)" :label-width="formLabelWidth">
                <el-input v-model="editForm.lockTime" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              ——————————————————————————————————————————————————————————
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="审核人" :label-width="formLabelWidth">
                <el-input v-model="editForm.managerName" autocomplete="off" placeholder="请输入内容" :disabled="true"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="editDialogFormVisible = false">关 闭</el-button>
          <el-button type="danger" @click="executeFailed()">驳回</el-button>
          <el-button type="primary" @click="executeEdit()">审核通过</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <el-pagination @size-change="handleSizeChange"
                     @current-change="handleCurrentChange"
                     :current-page="pageInfo.page"
                     :page-sizes="[5, 10, 15, 20]"
                     :page-size="pageInfo.pageSize"
                     layout="total, sizes, prev, pager, next, jumper"
                     :total="pageInfo.totalNum">
      </el-pagination>
    </div>
</template>
<script>
export default {
    data() {
        return {
          prodData: [],
          queryForm:{
              prodName:'',
              prodState:'',
          },
          pageInfo: {
            page: 2,
            pageSize: 20,
            totalNum: 50,
          },
          editDialogFormVisible: false,
          editForm: {
            prodId: '',
            prodCategoryName: '',
            parentClass: '',
            prodName: '',
            prodChannelName: '',
            anlRate: '',
            currencyType: '',
            opeTime: '',
            subsPeriod: '',
            fundManageRate: '',
            subsRate: '',
            iniInvestAmt: '',
            subsCoMethod: '',
            redCycle: '',
            redStartAmt: '',
            redFee: '',
            lockTime: '',
            managerName:'',
          },
          formLabelWidth: "120px",
        }
    },
    methods:{
      toEdit(index, row) {
        this.editDialogFormVisible = true;
        var reqData = "prodId=" + row.prodId;
        this.queryProdByUid(reqData);
      },
      queryProdByUid(reqData) {
        this.$axios
            .post("/check/toEdit", reqData)
            .then((resp) => {
              this.editForm = resp.data.returnData;
            })
            .catch((error) => {
              console.log(error);
            });
      },
      executeEdit() {
        this.editDialogFormVisible = false;
        var reqData = "prodId=" + this.editForm.prodId;
        this.operateCUD("/check/edit", reqData);
      },
      executeFailed(){
        this.editDialogFormVisible = false;
        var reqData = "prodId=" + this.editForm.prodId;
        this.operateCUD("/check/failed", reqData);
      },
      executeDelete(index, row) {
        this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          var reqData="prodId="+row.prodId;
          this.operateCUD("/check/delete",reqData);
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      executeQuery() {
        var reqData = this.$qs.stringify(this.queryForm);
        this.queryProd(reqData);
      },
      resetForm(queryForm) {
        this.$refs[queryForm].resetFields();
        this.queryForm={prodName:'',
          prodState:'',};
        this.queryProd("");
      },
      queryProd(reqData) {
        this.$axios.post("/check/query", reqData).then(resp => {
          this.prodData = resp.data.returnData.prodList;
          this.pageInfo = resp.data.returnData.pageInfo;

        })
            .catch(error => {
              console.log(error);
            })
      },
      handleSizeChange(val) {
        this.pageInfo.page = 1;
        this.pageInfo.pageSize = val;
        var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
        this.queryProd(reqData);
      },
      handleCurrentChange(val) {
        this.pageInfo.page = val;
        var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
        this.queryProd(reqData);
      },
      operateCUD(reqUrl, reqData) {
        this.$axios.get(reqUrl + "?" + reqData)
            .then(resp => {
              if (resp.data.returnCode === 2002) {
                this.$message({
                  showClose: true,
                  message: resp.data.returnMsg,
                  type: 'success'
                });
              } else if (resp.data.returnCode === 4002) {
                this.$message({
                  showClose: true,
                  message: resp.data.returnMsg,
                  type: 'error'
                });
              }
              ;
              this.pageInfo.page = 1;
              this.pageInfo.pageSize = 5;
              var reqData = this.$qs.stringify(this.pageInfo) + "&" + this.$qs.stringify(this.queryForm);
              this.queryProd(reqData);
            })
            .catch(error => {
              console.log(error)
            });
      },
    },
    mounted(){
      this.queryProd("");
    },
}
</script>
<style>

</style>